<!DOCTYPE html>
<html lang='ko'>
<head>
	<meta charset="UTF-8">
	<title>para.html</title>
	<style>
		.title
		{
			border:1px solid #aaaaaa;
			background-color:#eeeeee;
			padding:7px;
			margin-top:15px;
			margin-bottom:15px;
			border-left-width:20px;
		}
	</style>
</head>
<body>
	<section>
		<h1>
			문단모양 Example
		</h1>
		<article>
			<div class='title'>
				1. P Tag
			</div>
			
			<p>
				위 아래 문장과 자동으로 한줄 공백이 발생한다
			</p>
			<p>
				반복 사용한다고 해도 두번이상은 적용되지않는다
			</p>
			<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
			<p>
				P Tag를 여러번 한 이후의 문장임
			</p>
		</article>
		<article>
			<div class='title'>
				2. DIV Tag
			</div>
			<div>
				div 태그는 문장의 내용이 짧아도 한줄 전체를 차지한다.
			</div>
			<div></div><div></div><div></div><div></div>
			<div>
				2번 이상 반복해도 적용되지 않는다.
			</div>
		</article>
		
		<article>
			<div class='title'>
				3. Pre Tag
			</div>
			<pre>
				태그의 <mark>효과</mark>는 적용되면서
				입력한 		그대로 문장이 표현된다.
				입력한 내용에 따라 불필요한 좌우 스크롤바가
				만들어 질 수 있다.
			</pre>
		</article>
		
		<article>
			<div class='title'>
				4. HR Tag
			</div>
			<xmp>
				<hr/>
			</xmp>
			<hr/>
			<xmp>
				<hr size='30px'/>굵기를 30px로
			</xmp>
			<hr size='30px'/>
			<xmp>
				<hr size='30px' width='200px'/>
			</xmp>
			<hr size='30px' width='200px'/>
			<xmp>
				<hr width='60%'/>
			</xmp>
			<hr width='60%'/>
			
			<xmp>
				<hr width='60%' size='30px' noshade/>
			</xmp>
			<hr width='60%' size='30px' noshade/>
		</article>
		
		<article>
			<div class=title>
				5. BR Tag
			</div>
			HTML 특성상 엔터키를 인식하지 못하므로 엔터키<br/>
			대신 줄을 바꾸기 위해 사용됨<br/>
			<br/><br/><br/><br/><br/><br/><br/>
			사용한 만큼 효과가 나타남.
		</article>
		
		<article>
			<div class=title>
				6. FieldSet Tag
			</div>
			<fieldset>
				<legend>
					FieldSet연습
				</legend>
				FieldSet은 항목을 묶어줄때 사용되며 legend하위
				태그를 사용하여 제목을 달수있다.
			</fieldset>
		</article>
	</section>
</body>
</html>